var path = require('path');
var gulp = require('gulp');
var $ = {
    watch: require("gulp-watch"),
    less:require('gulp-less'),
    sourcemaps: require('gulp-sourcemaps'),
    autoprefixer : require('gulp-autoprefixer')
}
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('less', function () {
    $.watch('./less/main.less',function(file){
        // var file = {
        //     contents: file.contents,
        //     cwd: file.cwd,
        //     base: file.base,
        //     path: file.path,
        //     history: file.history,
        //     relative: file.relative,
        //     dirname: file.dirname,
        //     basename: file.basename,
        //     stem: file.stem,
        //     extname: file.extname,
        //     symlink: file.symlink,
        //     EvtType: file.event
        // };
        console.log(file.path,file.event);
        gulp.src('./less/main.less')
            .pipe($.sourcemaps.init())
            .pipe($.less({
                paths: [path.join(__dirname, 'less', 'includes')]
            }))
            .pipe($.autoprefixer({
                browsers:["last 2 major versions"],
                cascade: false
            }))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest('./css'))
            .pipe(reload({stream:true}));
    })
});

var sass = require('gulp-sass');
gulp.task('sass', function () {
    $.watch('./sass/main.sass',function(file){
        // var file = {
        //     contents: file.contents,
        //     cwd: file.cwd,
        //     base: file.base,
        //     path: file.path,
        //     history: file.history,
        //     relative: file.relative,
        //     dirname: file.dirname,
        //     basename: file.basename,
        //     stem: file.stem,
        //     extname: file.extname,
        //     symlink: file.symlink,
        //     EvtType: file.event
        // };
        console.log(file.path,file.event);
        gulp.src('./sass/main.sass')
            .pipe($.sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe($.autoprefixer({
                browsers:["last 2 major versions"],
                cascade: false
            }))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest('./css'))
            .pipe(reload({stream:true}));
    })
});

gulp.task("html",function(){
    $.watch("./index.html",function(files){
        return gulp.src("./index.html")
            .pipe(reload({stream:true}))
    })
})

gulp.task("serve",["html","less"],function(){
    browserSync({
        server: {
          baseDir: './'
        }
      });
})